import React, {useState} from 'react'
import {SearchPanel} from './search-panel'
import {List} from './list'
import {useDebounce, useDocumentTitle} from '../../utils/'
import styled from "@emotion/styled";
import {useProjects} from "../../utils/project";
import {useUsers} from "../../utils/user";
import {useProjectModal, useProjectsSearchParams} from "./util";
import {Button} from "antd";
import {ErrorBox, Row} from "../../components/lib";

export const ProjectListScreen = () => {
  useDocumentTitle('项目列表', false)

  const {open} = useProjectModal()
  const [error] = useState<Error | null>(null)

  const [param, setParam] = useProjectsSearchParams()
  const {isLoading, data: list} = useProjects(useDebounce(param, 200))
  const {data: users} = useUsers()
  return (
      <Container>
        <Row between={true}>
            <h1>项目列表</h1>
            <Button
                onClick={open}
                type={'link'}
            >
                创建项目
            </Button>
        </Row>
        <SearchPanel users={users||[]} param={param} setParam={setParam}/>
        <ErrorBox error={error}/>
        <List
            loading={isLoading}
            users={users||[]}
            dataSource={list || []}
        />
      </Container>
  )
}

ProjectListScreen.whyDidYouRender = false

const Container = styled.div`
  padding: 3.2rem;
  width: 100%;
`
